<template>
	<div class="strategyAdd">
		<div class="cjjTitle">添加 景点列表</div>
		<div class="detail">
			<div style="height: 70px;">
				<p class="inpBox"><span class="star">*</span> <span>景点名称：</span>
					<el-input class="inp" @blur="loseFcs" v-model="input" placeholder="请输入景点名称"></el-input>
				</p>
				<p v-show="isShow" class="tips">请输入你的景点名称</p>
			</div>
			<div class="uploadBox">
				<span><span class="star">*</span> 背景图</span><el-upload
  class="upload-demo"
  action=""
  :on-change='changeUpload'
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张不超过5M</div>
</el-upload>
			</div>
			<div class="timeBox">
				<span><span class="star">*</span>时间组</span>
<el-button class="timeBtn" icon="el-icon-plus" circle type="primary" @click="dialogTableVisible = true"></el-button>

<el-dialog :visible.sync="dialogTableVisible">
	<h2>新增 时间组</h2>
	<div class="selTime">
		<span><span class="star">*</span>时间</span><el-time-select
  v-model="value1"
  :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:30'
  }"
  placeholder="00:00">
</el-time-select>
	</div>
	<div class="uploadBox">
				<span><span class="star">*</span> 背景图</span><el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change='timeChangeUpload' 
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList1"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张不超过5M</div>
</el-upload>
			</div>
			<div class="confirm">
    		<el-button @click="timeAdd" :class="btnStyle" :loading="isUpload" round>提交</el-button>
   		 </div>
</el-dialog>

			</div>
			<div class="dataBox">
				 <el-table
      :data="tableData"
      row-class-name="tableRowCjj"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="时间"
        width="200"
        >
      </el-table-column>
      <el-table-column
        prop="imgUrl"
        label="图片"
        width="400"
        >
        <template slot-scope="scope">
        	<img :src="baseUrl+scope.row.timeImg" alt="" />
        </template>
        
      </el-table-column>
      <el-table-column
      	width="300"
        prop="address"
        label="操作"
        >
      <template slot-scope="scope">
        <el-button
          round
          size="mini"
          @click="timeHandleEdit"><i class="el-icon-edit"></i></el-button>
        <el-button
          :data-id="scope.row.id"
       	  round
          size="mini"
          type="danger"
          @click="timeDeleteRow(scope.row.id)"><i class="el-icon-delete"></i></el-button>
      </template>
      </el-table-column>
    </el-table>
			</div>
			<div class="postBtn">
				<el-button @click="upLoad" :class="btnStyle" :loading="isUpload" round>{{btnName}}</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import config from "@/assets/js/config.js"
	
export default {
  name: 'StrateAdd',
  components: {
  },
  data(){
  	return{
  		tableData: [],
        dialogTableVisible: false,
        btnName:"立即提交",
        btnStyle:"primary",
        value1: '',
        input: '',
		isShow: false,
		isUpload:false,
		token:'',
		fileList:[],
		bgImg:'',
		baseUrl:config.baseUrl,
		fileList1:[],
		timeImg:'',
		timeImgArr:[]
		
  	}
  },
   methods: {
   		changeUpload(file, fileList){
			console.log(file,fileList);
			var formData = new FormData();
				formData.append("files",file.raw);
				this.$submit.post(config.upImg,formData).then(res=>{
					console.log(res);
					var imgUrl = {};
					imgUrl = [{url:this.baseUrl+res.data.data.img_url}];
					console.log(imgUrl);
					this.fileList = imgUrl;
					this.bgImg = res.data.data.img_url;
					console.log(this.bgImg);
				}).catch(function(err){
					console.log("fail");
				})
   		},
   		timeChangeUpload(file, fileList){
   			console.log(file,fileList);
			var formData = new FormData();
				formData.append("files",file.raw);
				this.$submit.post(config.upImg,formData).then(res=>{
					console.log(res);
					var imgUrl = {};
					imgUrl = [{url:this.baseUrl+res.data.data.img_url}];
					console.log(imgUrl);
					this.fileList1 = imgUrl;
					this.timeImg = res.data.data.img_url;
					this.timeImgArr.push(res.data.data.img_url);
					console.log(this.timeImgArr);
				}).catch(function(err){
					console.log("fail");
				})
   		},
   		loseFcs() {
			if(this.input == '') {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		upLoad() {
			this.$submit.post(config.addStrategy,{
				bg_url:this.bgImg,
				name:this.input,
				time_id_array:",,"
			}).then((res)=>{
				console.log(res);
				 this.$router.push({
        			name:'strategy'
        		})  
			}).catch(function(err){
				console.log("fail");
			})
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		},
		timeAdd(){
			console.log(this.value1);
			console.log(this.timeImg);
				this.$submit.post(config.addStrategyTime,{
					img_url:this.timeImg,
					time_string:this.value1
				}).then((res)=>{
					console.log(res);
					var tableObj = {};
					tableObj.date = this.value1;
					tableObj.timeImg = this.timeImg;
					this.tableData.push(tableObj);
					console.log(this.tableData);
					this.dialogTableVisible = false;
					this.timeImg = '';
					this.fileList1=[];
					this.value1 = "";
				}).catch(function(err){
					console.log("fail");
				})
   		},
   		timeHandleEdit(){
   			
   		},
   		timeDeleteRow(){
   			
   		}
		}
    }
</script>

<style lang="scss" scoped="scoped">
	.strategyAdd{
		min-width: 1200px;
		height: 100%;
		overflow: auto;
		margin-top: 5px;
		text-align: left;
		box-sizing: border-box;
		padding-left: 25px;
		.cjjTitle{
			font-size: 36px;
			font-weight: bold;
		}
		.detail {
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
			box-sizing: border-box;
			padding-left: 30px;
			.uploadBox{
				.star{
					color: red;
				}
				span{
					display: inline-block;
					padding-bottom: 5px;
				}
			}
			.inpBox {
				display: flex;
				align-items: center;
				.star {
					color: red;
					padding-right: 5px;
				}
				span {
					white-space: nowrap;
				}
				.inp {
					.el-input__inner {
						border-radius: 10px;
						outline: none;
						font-size: 14px;
					}
				}
			}
			.tips {
				font-size: 12px;
				margin-top: 5px;
				padding-left: 50px;
				color: red;
			}
			.postBtn{
				margin-top: 20px;
				.primary{
					background: #006699;
					color: white;
				}
				.primary:hover{
					color:#CCFFFF;
					background:#333399
				}
				.success{
					background: #99CC00;
					color: #CCFFCC;
				}
			}
			.timeBox{
				margin-top: 20px;
				box-sizing: border-box;
				.star{
						color: red;
					}
					span{
						display: inline-block;
						padding-bottom: 5px;
						padding-right: 5px;
					}
				
				.timeBtn:hover{
					background:#87CEEB;
				}
				.uploadBox{
					margin-top: 5px;
				.star{
					color: red;
				}
				span{
					display: inline-block;
					padding-bottom: 5px;
				}
			}
			.selTime{
				margin-top: 10px;
			}
			.confirm{
				margin-top: 20px;
				.primary{
					background: #006699;
					color: white;
				}
				.primary:hover{
					color:#CCFFFF;
					background:#333399
				}
				.success{
					background: #99CC00;
					color: #CCFFCC;
				}
			}
			}
			.dataBox{
				margin-top: 5px;
				img{
					width: 200px;
				}
			}
			.postBtn{
				margin-top: 20px;
				.primary{
					background: #006699;
					color: white;
				}
				.primary:hover{
					color:#CCFFFF;
					background:#333399
				}
				.success{
					background: #99CC00;
					color: #CCFFCC;
				}
			}
		}
	}
</style>